<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/index1.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <!-- ************** 头部内容区 start ************** -->
    <div class="MZ_header">
        <!-- 轮播图 -->
        <div class="wrapAll">
            <ul class="slideBar">
                <li>
                    <img src="../images/banner_01.jpg" alt="">
                </li>
                <li>
                    <img src="../images/banner_02.jpg" alt="">
                </li>
                <li>
                    <img src="../images/banner_03.jpg" alt="">
                </li>
                <li>
                    <img src="../images/banner_04.jpg" alt="">
                </li>
                <li>
                    <img src="../images/banner_01.jpg" alt="">
                </li>
            </ul>
            <ul class="dotList">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 导航栏 nav -->
        <div class="nav">
            <!-- 上nav -->
            <div class="header_nav">
                <div class="log">
                    <a href="../html/index1.html">
                        <img src="../images/log01.png" alt="">
                    </a>
                </div>
                <ul class="navul">
                    <li class="star" abc="phone">
                        <a href="javascript:;">手机</a>
                    </li>
                    <li class="star" abc="Lipro">
                        <a href="javascript:;">Lipro</a>
                    </li>
                    <li class="star" abc="earpiece">
                        <a href="javascript:;">声学</a>
                    </li>
                    <li class="star" abc="other">
                        <a href="javascript:;">配件</a>
                    </li>
                    <li class="star" abc="clothes">
                        <a href="javascript:;">生活</a>
                    </li>
                    <li>
                        <a href="javascript:;">Flyme</a>
                    </li>
                    <li>
                        <a href="javascript:;">服务</a>
                    </li>
                    <li>
                        <a href="javascript:;">专卖店</a>
                    </li>
                    <li>
                        <a href="javascript:;">社区</a>
                    </li>
                    <li>
                        <a href="javascript:;">企业服务</a>
                    </li>
                    <li class="app">
                        <a href="javascript:;">APP下载</a>
                    </li>
                </ul>
                <div class="inputBox">
                    <input type="text" placeholder="魅族18">
                    <i class="iconfont icon-sousuo"></i>
                </div>
                <div class="user">
                    <i class="iconfont icon-yonghu"></i>
                    <div class="u_box">
                        <ul class="meizu-header-user-dropdown">
                            <li class="logli">
                                <a href="./login.html">立即登录</a>
                            </li>
                            <li class="registli">
                                <a href="./register.html">立即注册</a>
                            </li>
                            <li>
                                <a href="./login.html">我的订单</a>
                            </li>
                            <li>
                                <a href="https://mformy.meizu.com/">M码通道</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="spCart">
                    <i class="iconfont icon-shoppingcart"></i>
                </div>
            </div>
            <!-- 二级导航 shadowBox star -->
            <div class="shadowBox">
                <div class="shadow">
                    <ul class="navList">
                        <li>
                            <img src="../images/phone_ 1.png" alt="">
                            <p>魅族18[踏雪]</p>
                            <span>￥4399</span>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 二级导航 shadow end -->
            <!-- 二级导航 imgBox star -->
            <div class="imgBox">
                <div class="box">
                    <img src="../images/app.jpg" alt="">
                </div>
            </div>
            <!-- 二级导航 imgBox end -->
        </div>
    </div>
    <!-- ************** 头部内容区 end ************** -->

    <!-- ************** icon图标区 start ************** -->
    <div class="MZ_icon">
        <div class="icon">
            <ul>
                <li>
                    <img src="../images/icon1.jpg" alt="">
                    <h3>魅族焕新季</h3>
                    <p>享12期免息 送 POP 2s耳机</p>
                </li>
                <li>
                    <img src="../images/icon2.jpg" alt="">
                    <h3>Lipro 智能家居</h3>
                    <p>健康照明</p>
                </li>
                <li>
                    <img src="../images/icon3.png" alt="">
                    <h3>5G之家</h3>
                    <p>电信套餐享大额补贴</p>
                </li>
                <li>
                    <img src="../images/icon4.jpg" alt="">
                    <h3>mCycle</h3>
                    <p>以旧换新</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- ************** icon图标区 end ************** -->

    <!--  ************** 手机 phone start ************** -->
    <div class="MZ_phone">
        <div class="top">
            手机
        </div>
        <div class="banner">
            <img src="../images/p_b.jpg" alt="">
        </div>
        <div class="phoneList">
            <ul class="ubox">
                <li class="goLists">
                    <p class="goodsName">魅族 18</p>
                    <p class="goodsMsg">高通骁龙 888 ｜162g 6.2英寸轻妙手感</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>4399
                        </span>
                    </p>
                    <div class="redBox">免息</div>
                    <img class="goodsImg" src="../images/phone01.png" alt="">
                </li>
                <li class="goLists">
                    <p class="goodsName">魅族 18 Pro</p>
                    <p class="goodsMsg">高通骁龙 888 ｜2K+ 120 帧微弧柔性屏</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>4999
                        </span>
                    </p>
                    <div class="redBox">免息</div>
                    <img class="goodsImg" src="../images/phone02.png" alt="">
                    <div class="redBox">免息</div>
                </li>
            </ul>
            <ul class="uli">
                <li class="goLists">
                    <img class="goodsImg" src="../images/phone03.png" alt="">
                    <p class="goodsName">魅族 17「AG梦幻独角兽」</p>
                    <p class="goodsMsg">【高通骁龙 865 | 120 Hz尝鲜模式】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>3699
                        </span>
                    </p>
                </li>
                <li class="goLists">
                    <img class="goodsImg" src="../images/phone04.png" alt="">
                    <p class="goodsName">魅族 17「AG原野绿」</p>
                    <p class="goodsMsg">【高通骁龙 865 | 120 Hz尝鲜模式】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>3699
                        </span>
                    </p>
                </li>
                <li class="goLists">
                    <img class="goodsImg" src="../images/phone05.png" alt="">
                    <p class="goodsName">魅族 17 Pro「乌金」</p>
                    <p class="goodsMsg">限时领券至高立省1000+12期免息</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>4299
                        </span>
                    </p>
                </li>
                <li class="goLists">
                    <img class="goodsImg" src="../images/phone06.png" alt="">
                    <p class="goodsName">魅族 17 Pro「定白」</p>
                    <p class="goodsMsg">限时领券至高立省1000+12期免息</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>4299
                        </span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!--  ************** 手机 phone end ************** -->

    <!--  ************** Lipro 智能家居 start ************** -->
    <div class="MZ_Lipro">
        <div class="top">
            Lipro 智能家居
        </div>
        <div class="banner">
            <img src="../images/Lipro.jpg" alt="">
        </div>
        <div class="LiproList">
            <ul>
                <li class="oLi1 goLists">
                    <img class="goodsImg" src="../images/L1.jpg" alt="">
                    <div class="msgBox">
                        <p class="goodsName">魅族 Lipro LED 橱柜灯</p>
                        <p class="goodsMsg">博物馆级健康光 RG0 舒适低蓝光 磁吸随贴安装</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>269
                            </span>
                        </p>
                    </div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 01.jpg" alt="">
                    <p class="goodsName">魅族 Lipro LED 橱柜灯</p>
                    <p class="goodsMsg">博物馆级健康光 RG0 舒适低蓝光 磁吸随贴安装</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>199
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 02.png" alt="">
                    <p class="goodsName">魅族 Lipro LED 地脚灯</p>
                    <p class="goodsMsg">博物馆级健康光 | 无可见频闪 | 主动式雷达检测</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>99
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 03.png" alt="">
                    <p class="goodsName">魅族 Lipro LED 筒灯</p>
                    <p class="goodsMsg">博物馆级健康光 RG0 舒适低蓝光 IP54 密封设计</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>299
                        </span>
                    </p>
                </li>

                <li class="oLi1 goLists">
                    <img class="goodsImg" src="../images/L2.jpg" alt="">
                    <div class="msgBox">
                        <p class="goodsName">魅族 Lipro LED 灯泡</p>
                        <p class="goodsMsg">博物馆级健康光 RG0舒适低蓝光</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>49
                            </span>
                        </p>
                    </div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 04.png" alt="">
                    <p class="goodsName">魅族 Lipro LED 灯泡</p>
                    <p class="goodsMsg">博物馆级健康光 RG0舒适低蓝光</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>49
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 05.png" alt="">
                    <p class="goodsName">魅族 Lipro LED 灯带</p>
                    <p class="goodsMsg">博物馆级健康光 | 无可见频闪 | 柔性布光</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>999
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/Lipro_ 06.png" alt="">
                    <p class="goodsName">魅族 Lipro 驱动电源</p>
                    <p class="goodsMsg">55W 输出功率 | 铝制金属外壳</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>249
                        </span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!--  ************** Lipro 智能家居 end ************** -->

    <!--  ************** 魅族声学other start ************** -->
    <div class="MZ_other">
        <div class="top">
            魅族声学
        </div>
        <div class="banner">
            <img src="../images/other_B.jpg" alt="">
        </div>
        <div class="otherList">
            <ul>
                <li class="oLi1 goLists">
                    <img class="goodsImg" src="../images/o_1.jpg" alt="">
                    <div class="msgBox">
                        <p class="goodsName">魅族 EP3C 耳机</p>
                        <p class="goodsMsg">【限时特惠99元】</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>129
                            </span>
                        </p>
                    </div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_01.png" alt="">
                    <p class="goodsName">魅族 POP Pro 主动降噪耳机</p>
                    <p class="goodsMsg">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>499
                        </span>
                    </p>
                    <div class="redBox">新品</div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_02.png" alt="">
                    <p class="goodsName">魅族 POP2s 真无线耳机</p>
                    <p class="goodsMsg">【3期免息】好声音标杆 | Flyme 妙连</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>299
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_03.png" alt="">
                    <p class="goodsName">魅族 EP63NC 无线降噪耳机</p>
                    <p class="goodsMsg">【限时特惠249元+3期免息】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>399
                        </span>
                    </p>
                </li>

                <li class="oLi1 goLists">
                    <img class="goodsImg" src="../images/o_2.jpg" alt="">
                    <div class="msgBox">
                        <p class="goodsName">魅族 EP63NC 无线降噪耳机</p>
                        <p class="goodsMsg">【限时特惠249元+3期免息】</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>399
                            </span>
                        </p>
                    </div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_04.png" alt="">
                    <p class="goodsName">魅族 HD60 降噪耳机</p>
                    <p class="goodsMsg">【限时特惠799元+12期免息】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>1099
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_05.png" alt="">
                    <p class="goodsName">魅族 POP2 真无线蓝牙耳机</p>
                    <p class="goodsMsg">【限时特惠229元+3期免息】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>399
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_06.png" alt="">
                    <p class="goodsName">魅族 HIFI 解码耳放</p>
                    <p class="goodsMsg">【限时特惠149元】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>169
                        </span>
                    </p>
                </li>

                <li class="oLi1 goLists">
                    <img class="goodsImg" src="../images/o_3.jpg" alt="">
                    <div class="msgBox">
                        <p class="goodsName">MEIZU UR 高端定制耳机 预约</p>
                        <p class="goodsMsg">【预约专用】私人定制，为你而声</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>200
                            </span>
                        </p>
                    </div>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_07.png" alt="">
                    <p class="goodsName">MEIZU UR LIVE 特调版</p>
                    <p class="goodsMsg">手工定制公模 ｜ 楼氏定制四单元动铁</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>169
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_08.png" alt="">
                    <p class="goodsName">POP 真无线蓝牙耳机</p>
                    <p class="goodsMsg">【限时特惠299元】</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>299
                        </span>
                    </p>
                </li>
                <li class="oli2 goLists">
                    <img class="goodsImg" src="../images/erji_09.png" alt="">
                    <p class="goodsName">魅族 EP2X 耳机</p>
                    <p class="goodsMsg">一体式线控 | 3.5mm接口 | 流线设计</p>
                    <p class="goodsPrice">
                        <span>
                            <w class="w">￥</w>69
                        </span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!--  ************** 魅族声学other end ************** -->

    <!--  ************** 手机配件fittings  star ************** -->
    <div class="MZ_fittings">
        <div class="fittings">
            <div class="top">
                智能配件
            </div>
            <div class="banner">
                <img src="../images/F_B.jpg" alt="">
            </div>
            <div class="fittList">
                <ul>
                    <li class="oLi1 goLists">
                        <img class="goodsImg" src="../images/F_1.jpg" alt="">
                        <div class="msgBox">
                            <p class="goodsName">魅族 18 液态硅胶壳 盲盒</p>
                            <p class="goodsMsg">惊喜盲盒随机选 | 附赠定制水凝膜</p>
                            <p class="goodsPrice">
                                <span>
                                    <w class="w">￥</w>89
                                </span>
                            </p>
                        </div>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_01.jpg" alt="">
                        <p class="goodsName">魅族 18 液态硅胶壳</p>
                        <p class="goodsMsg">惊喜盲盒随机选 | 附赠定制水凝膜</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>89
                            </span>
                        </p>
                        <div class="redBox">新品</div>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_02.jpg" alt="">
                        <p class="goodsName">魅族 18 Pro 液态硅胶壳</p>
                        <p class="goodsMsg">惊喜盲盒随机选 | 附赠定制水凝膜</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>89
                            </span>
                        </p>
                        <div class="redBox">新品</div>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_03.png" alt="">
                        <p class="goodsName">魅族超充 GaN 三口充电器</p>
                        <p class="goodsMsg">【限时特惠169元】</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>199
                            </span>
                        </p>
                    </li>

                    <li class="oLi1 goLists">
                        <img class="goodsImg" src="../images/F_2.jpg" alt="">
                        <div class="msgBox">
                            <p class="goodsName">魅族 HD60 头戴式蓝牙耳机</p>
                            <p class="goodsMsg">【限时特惠329元+3期免息】</p>
                            <p class="goodsPrice">
                                <span>
                                    <w class="w">￥</w>499
                                </span>
                            </p>
                        </div>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_04.png" alt="">
                        <p class="goodsName">魅族超充适配器 40W</p>
                        <p class="goodsMsg">智能兼容 QC 3.0 / 2.0 快充协议 | 安全无忧</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>89
                            </span>
                        </p>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_05.png" alt="">
                        <p class="goodsName">魅族 17 系列 液态硅胶壳</p>
                        <p class="goodsMsg">魅族 17 / 魅族 17 Pro 适用</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>89
                            </span>
                        </p>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_06.png" alt="">
                        <p class="goodsName">魅族 Type-C 游戏专用线</p>
                        <p class="goodsMsg">Type-C 接口 | 5A大电流 | 弯头专为游戏设计</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>49
                            </span>
                        </p>
                    </li>

                    <li class="oLi1 goLists">
                        <img class="goodsImg" src="../images/F_3.jpg" alt="">
                        <div class="msgBox">
                            <p class="goodsName">MEIZU UR 高端定制耳机 预约</p>
                            <p class="goodsMsg">【预约专用】私人定制，为你而声</p>
                            <p class="goodsPrice">
                                <span>
                                    <w class="w">￥</w>200
                                </span>
                            </p>
                        </div>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_07.png" alt="">
                        <p class="goodsName">魅族双 USB-C 快充线</p>
                        <p class="goodsMsg">双 USB-C 接口 | 5A 大电流</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>89
                            </span>
                        </p>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_08.png" alt="">
                        <p class="goodsName">魅族 Type-C 数据线</p>
                        <p class="goodsMsg">5A 大电流 | Type-C 接口 | 更快更方便</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>49
                            </span>
                        </p>
                    </li>
                    <li class="oli2 goLists">
                        <img class="goodsImg" src="../images/fittings_09.png" alt="">
                        <p class="goodsName">Lifeme PD 快充线</p>
                        <p class="goodsMsg">【限时特惠49元】</p>
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>69
                            </span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--  ************** 手机配件fittings  end ************** -->

    <!--  ************** 尾部footer  star ************** -->
    <div class="MZ_footer">
        <div class="footer">
            <div class="top">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_1.png" alt="">
                            <p>满80免运费</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_2.png" alt="">
                            <p>100+ 城市次日送达</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_3.png" alt="">
                            <p>7天无理由退货</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_4.png" alt="">
                            <p>15天换货保障</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_5.png" alt="">
                            <p>1年免费保修</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/li_6.png" alt="">
                            <p>上门快修</p>
                        </a>
                    </li>
                </ul>
                <div class="box">
                    <span>周一至周日 8:00-20:00</span>
                    <p>400-788-3333</p>
                    <div class="sbox">
                        在线客服
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                了解魅族
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                加入我们
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                联系我们
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                Flyme
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                魅族社区
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                天猫旗舰店
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                问题反馈
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                线上销售授权名单公示
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                出版物经营许可证
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                简体中文
                            </a>
                        </li>
                    </ul>
                    <p>©2020 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                        <a href="javascript:;">粤ICP备13003602号</a>
                        <a href="javascript:;">合字B2-20170010</a>
                        <a href="javascript:;">营业执照</a>
                        <a href="javascript:;">法律声明</a>
                        <a href="javascript:;">
                            <i></i>
                            粤公网安备 44049102496009号
                            <i></i>
                            <i></i>
                        </a>
                    </p>
                </div>
                <div class="right">
                    <div class="icon">
                        <a href="https://weibo.com/meizumobile">
                            <span class="i1"></span>
                        </a>

                        <div class="ibox">
                            <span class="i2"></span>
                            <div class="QR">
                                <img src="../images/QR.jpg" alt="">
                            </div>
                        </div>

                        <a href="https://user.qzone.qq.com/2762957059">
                            <span class="i3"></span>
                        </a>
                    </div>

                </div>

            </div>

        </div>
    </div>
    <!--  ************** 尾部footer  end ************** -->

    <!--  ************** 回到顶部gobox  star ************** -->
    <div class="gobox">
        <div class="email"></div>
        <div class="gotop"></div>
    </div>
    <!--  ************** 回到顶部gobox  end ************** -->


</body>


<script>
    // **************  标识用户身份 ************************* //
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");
        if (user) {
            $(".header_nav .u_box .logli").html(`<a href="jacvascript:;">欢迎,${user}</a>`);
            $(".header_nav .u_box .registli").html(`<a href="./index1.html">退出登录</a>`);
            $(".header_nav .u_box .registli").click(function () {
                setCookie("lgc", "", -1);
                location.reload();
            })
        }
    } else {
        var user = "";
    }

    // *********** 购物车 ***************** //
    if (user) {
        $(".spCart").click(function () {
            location.href = "../html/shoppingCar.html"
        })
    } else {
        $(".spCart").click(function () {
            location.href = "../html/login.html"
        })
    }


    //*************** 功能  渲染二级导航   ****************//
    //先将二级导航 隐藏
    $(function () {
        // $(".shadowBox").css({opacity:0})
        $(".shadowBox").hide()
    })


    // 鼠标滑到指定的一级导航里的li  渲染生成相对应的二级导航
    $(".navul .star").mouseenter(function () {

        //鼠标只有滑到指定的一级导航里面前五个 li 的时候才给 nav 添加背景颜色
        $(".nav").css({
            background: "#fff"
        })

        //鼠标只有滑到指定的一级导航里面前五个 li 的时候才让 二级导航 显示
        // $(".shadowBox").css({opacity:1});
        $(".shadowBox").show();

        //获取当前li的自定义属性名
        var name = $(this).attr("abc");
        console.log(name);
        //按照对应的属性名进行数据渲染
        searchNavListById({
            id: name
        }).then((result) => {
            var {
                status,
                detail,
                list
            } = result;
            if (status) {
                var html = "";
                list.forEach(function (item) {
                    var {
                        goodsId,
                        goodsName,
                        goodsPrice,
                        goodsImg
                    } = item;
                    html += ` <li class="goLists">
                                <img src="${goodsImg}" alt="">
                                <p>${goodsName}</p>
                                <span>￥${goodsPrice}</span>
                            </li>`
                })
                $(".navList").html(html);
            }
        }).catch(err => {
            throw err;
        })
    })

    // $(".navul li").not($(".star")).css({background:"red"})
    //鼠标移到不是一级导航指定的前五个 li    就让 二级导航  和  背景颜色都消失
    $(".navul li").not($(".star")).mouseenter(function () {
        // $(".shadowBox").css({opacity:0});
        $(".shadowBox").hide()
        $(".nav").css({
            background: "none"
        })
    })

    //滑到二级导航的 li 给除了当前的 其他 li 添加蒙版
    $(document).on("mouseenter", ".navList li", function () {
            $(this).removeClass('active').siblings().addClass("active");
        })
        .on("mouseleave", ".nav", function () {
            $(this).css({
                background: "none"
            });
            $(".shadowBox").hide()
        })


    //先让 imgBox 隐藏
    $(function () {
        $(".imgBox").hide()
    })


    //鼠标滑上 app的li nav添加背景颜色 imgBox出现
    $(document).on("mouseenter", ".navul .app", function () {
        $(".nav").css({
            background: "#fff"
        });
        $(".imgBox").show()
    }).on("mouseleave", ".navul .app", function () {
        $(".imgBox").hide();
        $(".nav").css({
            background: "none"
        });
    })
    // .on("mouseleave",".imgbox",function(){
    //     $(".imgBox").hide();
    //     $(".nav").css({ background: "none"})
    // })




    //************ 用户登入 切换 ******//
    $(function(){
        $(".u_box").hide()
    })

    $(document).on("mouseenter",".user",function(){
        $(".u_box").show()
    }).on("mouseleave",".u_box",function(){
        $(".u_box").hide()
    })






    //*************** 功能  回到顶部  ****************//
    //先隐藏
    $(function () {
        $(".gobox").hide()
    })
    //淡入fadeIn()  淡出fadeOut()
    $(document).scroll(function () {
        if ($(document).scrollTop() >= 300) {
            $(".gobox").fadeIn(800)
        } else {
            $(".gobox").fadeOut(800)
        }
    })
    //点击返回顶部
    $(".gobox").click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });



    //*************** 功能  轮播图 *******************//
    $(function () {
        var index = 0; //全局的index  记录轮播时的下标
        var timer = null; // 记录计时器的编号
        var swiperWidth = $(".wrapAll").width();
        // console.log(swiperWidth);

        autoPlay(); // 页面加载时启动轮播

        $(".dotList li").click(function () {
            index = $(this).index(); // 同步下标到全局的index
            console.log(index);
            move();
        })

        // $(".wrapAll").mouseenter(function() {
        //     clearInterval(timer);
        // }).mouseleave(function() {
        //     autoPlay();
        // })

        // $(".left").click(function() {
        //     console.log($(".slideBar").is(":animated"));
        //     //:animated 匹配所有正在执行动画效果的元素
        //     index--;
        //     move();
        // })

        // $(".right").click(function() {
        //     console.log($(".slideBar").is(":animated"));
        //     //:animated 匹配所有正在执行动画效果的元素
        //     index++;
        //     move();
        // })


        function autoPlay() {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                move();
            }, 3000)
        }

        function move() {
            if (index < 0) { // 第一张向左滚动  (第一张切第五张  滚动到第四张)   
                index = $(".dotList li").length; // 第五张的下标
                $(".slideBar").css({
                    left: -swiperWidth * index
                }) // 切换到第五张
                index--; //   把下标改为第四张  后续会滚动到第四张 
            }

            if (index > $(".dotList li")
                .length) { // 超出第五张  (因为第五张看起来像第一张  下一次应该滚动到第二张)  ???   => 第五张切第一张  滚动到第二张
                index = 0;
                $(".slideBar").stop().css({
                    left: 0
                }); //第五张切第一张
                index++; //滚动到第二张
            }

            // index == $(".dotList li").length ? 0 : index
            // 判断是否是第五张 如果是第五张  把第一个点变为活跃状态 
            $(".dotList li").eq(index == $(".dotList li").length ? 0 : index).addClass("active").siblings()
                .removeClass("active");
            $(".slideBar").stop().animate({
                left: -swiperWidth * index
            }, function () {
                // 每次运动完毕之后判断    
                //console.log("运动执行完毕");
                // index >= 4 (第四张滚动第五张   切到第一张)
                if (index >= $(".dotList li").length) {
                    index = 0;
                    $(".slideBar").stop().css({
                        left: 0
                    })
                }
            })
        }
    })

    //点击商品 跳转商品列表页
    $(document).on("click", ".goLists", function () {
        location.href = "GoodList.html";
    }).on("click",".star",function(){
        location.href = "GoodList.html";
    })

</script>

</html>